<template>
	<view>
		<navbar mode="normal" :title="mode==0?'新增地址':'修改地址'"></navbar>
		<view class="content"  v-if="canshow">
			<view class="list">
				<view class="item">
					<text class="title">姓名</text>
					<input class="input" :value="name" type="text" @input="nameInput"/>
				</view>
				<view class="item" >
					<text class="title">手机号</text>
					<input class="input" :value="phone" type="text" @input="phoneInput"/>
				</view>
				<view class="item" >
					<text class="title">详细地址</text>
					<input class="input" :value="address" type="text" @input="addressInput"/>
				</view>
			</view>
			<view class="box">
				<button class="bottom" @click="confirm">{{mode==1?'修改':'确定'}}</button>
				<button v-if="mode == 1" class="bottom" @click="nowAddress">设为当前地址</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mode:0,
				canshow:false,
				name:"",
				phone:"",
				address:"",
				id:0
			};
		},
		onLoad(data) {
			this.mode = data.mode
			if(this.mode == 1){
				//console.log(data);
				this.name = data.name
				this.phone = data.phone
				this.address = data.address
				this.id = data.id
			}
			this.canshow = true
		},
		methods:{
			nowAddress(){
				var user = uni.getStorageSync("user")
				user.addressId = this.id
				uni.showLoading({
					
				})
				this.$request("user/register",user,function(res){
					uni.setStorageSync("user",res.data.data[0])
					uni.hideLoading()
				})
			},
			confirm(){
				var vue = this
				uni.showLoading({
					
				})
				var reqBody = {
						userId:uni.getStorageSync("user").id,
						name:this.name,
						phone:this.phone,
						address:this.address
					}
				if(this.mode == 1){
					reqBody.id = this.id
				}
				this.$request("address/add",
					reqBody,
					function(res){
						uni.hideLoading()
						var msg = "添加地址成功！"
						if(vue.mode == 1){
							msg = "修改地址成功！"
						}
						uni.showToast({
							title:msg
						})
						setTimeout(function(){
							uni.hideToast()
							uni.navigateBack({
								
							})
						},1000)
					}
				)
			},
			nameInput(v){
				this.name = v.detail.value
			},
			phoneInput(v){
				this.phone = v.detail.value
			},
			addressInput(v){
				this.address = v.detail.value
				//console.log(v.detail.value);
			}
		}
	}
</script>

<style lang="scss">
	.content{
		
		display: flex;
		flex-direction: column;
		width: 750rpx;
		height: 1334rpx;
		box-sizing: border-box;
		background-color: $my-background;
		//margin-top: 40rpx;
		
		.list{
			margin-top: 40rpx;
			.item{
				display: flex;
				flex-direction: row;
				background-color: #Fff;
				margin-bottom: 10rpx;
				height: 90rpx;
				width: 100%;
				align-items: center;
				padding: 2rpx 10rpx;
				
				.title{
					font-size: 32rpx;
					width: 150rpx;
				}
				.input{
					//border: 2rpx blue solid;
					//background-color: $my-background;
					width: 600rpx;
					height: 100%;
					margin-left: 10rpx;
				}
			}
		}
		.box{
			.bottom{
				margin-top: 40rpx;
				width: 300rpx;
				font-size: 34rpx;
			}
		}
	}
</style>
